<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>预约列表</title>
		<!-- 导入vue框架 -->
		<script src="js/v3.2.8/vue.global.prod.js"></script>
		<!-- 导入ElementPlus框架 -->
		<script src="js/element-plus.js"></script>
		<!-- 导入Elementplus Icon  -->
		<script src="js/element-icons.js"></script>
		<!-- 导入Elementplus Css样式 -->
		<link rel="stylesheet" href="css/element-plus.css">
		<!-- 引入主页面样式 -->
		<link rel="stylesheet" href="css/main.css">
		<style>
			.page {
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 20px;
			}
		</style>
	</head>
	<body scroll="no">
		<div id="app">
			<!-- 面包屑 -->
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>预约</el-breadcrumb-item>
				<el-breadcrumb-item>预约列表</el-breadcrumb-item>
			</el-breadcrumb>
			<!-- 搜索条 -->
			<div style="margin-top: 20px;">
				<el-descriptions class="margin-top" title="体检客户查询" :column="3" :size="size" border>
					<template #extra>
						<el-button type="primary">查询</el-button>
					</template>
					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								手机号
							</div>
						</template>
						<el-input v-model="address" placeholder="输入搜索的手机号" />
					</el-descriptions-item>

					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								姓名
							</div>
						</template>
						<el-input v-model="address" placeholder="输入预约体检的客户信息" />
					</el-descriptions-item>

					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								性别
							</div>
						</template>
						<el-select v-model="options.value" class="m-2" placeholder="选择性别">
							<el-option v-for="item in options" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</el-descriptions-item>

					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								预约院区
							</div>
						</template>
						<el-select v-model="yuanqu.value" class="m-2" placeholder="选择院区地址">
							<el-option v-for="item in yuanqu" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</el-descriptions-item>

					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								套餐类型
							</div>
						</template>
						<el-select v-model="yuyuetaocao.value" class="m-2" placeholder="预约套餐">
							<el-option v-for="item in yuyuetaocao" :key="item.value" :label="item.label"
								:value="item.value" />
						</el-select>
					</el-descriptions-item>

					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								体检时间
							</div>
						</template>
						<el-date-picker v-model="yuyuedate" type="date" placeholder="Pick a day" :size="size" />
					</el-descriptions-item>

					<el-descriptions-item>
						<template #label>
							<div class="cell-item">
								是否归档
							</div>
						</template>
						<el-radio-group v-model="radio2" class="ml-4">
							<el-radio label="1">未归档</el-radio>
							<el-radio label="2">已归档</el-radio>
						</el-radio-group>
					</el-descriptions-item>
				</el-descriptions>
			</div>
			<!-- 查询列表显示 -->

			<div style="margin-top: 20px;">
				<h4>预约客户查询列表</h4>
				<el-table :data="yuyuelist" style="width: 100%" stripe>
					<el-table-column label="订单编号" prop="ids" width="180" align="center"></el-table-column>
					<el-table-column label="客户姓名" prop="name" width="120" align="center"></el-table-column>
					<el-table-column label="客户手机号" prop="phone" width="180" align="center"></el-table-column>
					<el-table-column label="预约院区" prop="address" width="180" align="center"></el-table-column>
					<el-table-column label="预约套餐" prop="taocan" width="240" align="center"></el-table-column>
					<el-table-column label="预约时间" prop="yuyuedate" width="140" align="center"></el-table-column>
					<el-table-column label="是否归档" prop="guidang" width="120" align="center"></el-table-column>
					<el-table-column label="操作" width="260" align="center">
						<template #default>
							<el-button>取消预约</el-button>
							<!--当单击编辑按钮的时候，调用edit这个函数-->
							<el-button @click="edit">编辑</el-button>
						</template>
					</el-table-column>
				</el-table>
				<div class="page">
					<el-pagination small background layout="prev, pager, next" :total="50" class="mt-4" />
				</div>
			</div>
		</div>
	</body>
	<script>
		const App = {
			data() {
				return {
					//性别
					options: [{
							value: 'boy',
							label: '男士',
						},
						{
							value: 'women',
							label: '已婚女士',
						},
						{
							value: 'girl',
							label: '未婚女士',
						}
					],
					//预约院区
					yuanqu: [{
							value: 'hunnan',
							label: '沈阳熙康云医院-浑南院区'
						},
						{
							value: 'sanhao',
							label: '沈阳熙康云医院-三好街院区'
						},
						{
							value: 'shijidasha',
							label: '沈阳熙康云医院-世纪大厦'
						},
					],
					//预约套餐
					yuyuetaocao: [{
							value: 'taocanA',
							label: '23东软家属已婚女士套餐A'
						},
						{
							value: 'taocanB',
							label: '23东软家属已婚女士套餐B'
						},
						{
							value: 'taocanC',
							label: '23东软家属已婚女士套餐C'
						},
						{
							value: 'taocanD',
							label: '23东软家属已婚女士套餐D'
						}
					],
					yuyuedate: '', //预约时间
					radio2: '1', //是否归档
					//表单数据
					yuyuelist: [{
							"ids": "2023100256211023",
							"name": "张一山",
							"phone": "13100000000",
							"address": "熙康云医院-浑南院区",
							"taocan": "23东软家属已婚女士套餐C",
							"yuyuedate": "2015-02-12",
							"guidang": "已归档"
						},
						{
							"ids": "2023100256211023",
							"name": "张一山",
							"phone": "13100000000",
							"address": "熙康云医院-浑南院区",
							"taocan": "23东软家属已婚女士套餐C",
							"yuyuedate": "2015-02-12",
							"guidang": "已归档"
						},
						{
							"ids": "2023100256211023",
							"name": "张一山",
							"phone": "13100000000",
							"address": "熙康云医院-浑南院区",
							"taocan": "23东软家属已婚女士套餐C",
							"yuyuedate": "2015-02-12",
							"guidang": "已归档"
						},
						{
							"ids": "2023100256211023",
							"name": "张一山",
							"phone": "13100000000",
							"address": "熙康云医院-浑南院区",
							"taocan": "23东软家属已婚女士套餐C",
							"yuyuedate": "2015-02-12",
							"guidang": "已归档"
						},
						{
							"ids": "2023100256211023",
							"name": "张一山",
							"phone": "13100000000",
							"address": "熙康云医院-浑南院区",
							"taocan": "23东软家属已婚女士套餐C",
							"yuyuedate": "2015-02-12",
							"guidang": "已归档"
						},
						{
							"ids": "2023100256211023",
							"name": "张一山",
							"phone": "13100000000",
							"address": "熙康云医院-浑南院区",
							"taocan": "23东软家属已婚女士套餐C",
							"yuyuedate": "2015-02-12",
							"guidang": "已归档"
						},
						{
							"ids": "2023100256211023",
							"name": "张一山",
							"phone": "13100000000",
							"address": "熙康云医院-浑南院区",
							"taocan": "23东软家属已婚女士套餐C",
							"yuyuedate": "2015-02-12",
							"guidang": "已归档"
						}
					]
				}
			},
			methods: {}
		};
		const app = Vue.createApp(App);
		app.use(ElementPlus);
		app.mount("#app");
	</script>
</html>
